<template>
  <div class="map-container">
    <div id="viewDiv" class="map-view"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import gaodeLayer from '@/utils/GaoDeBaseLayer'

let view: MapView | null = null
let disasterLayer: FeatureLayer | null = null

onMounted(() => {
  initMap()
})

onUnmounted(() => {
  if (view) {
    view = null
  }
})

const initMap = () => {
  try {
    // 创建地图实例
    const map = new Map({
      basemap: {
        baseLayers: [gaodeLayer],
      },
    })

    // 创建地图视图
    view = new MapView({
      container: 'viewDiv',
      map: map,
      center: [117.0203, 36.6683], // 山东省济南市的经纬度
      zoom: 10,
    })

    // 创建灾难点要素图层
    disasterLayer = new FeatureLayer({
      url: 'https://services7.arcgis.com/chXsWZj8U6NqFZb6/arcgis/rest/services/DisasterDetectionAndRescueSystem/FeatureServer/0',
      outFields: ['*'], // 获取所有字段
      renderer: {
        type: 'simple',
        symbol: {
          type: 'simple-marker',
          color: [255, 0, 0],
          outline: {
            color: [255, 255, 255],
            width: 2,
          },
          size: 12,
        },
      },
      popupTemplate: {
        title: '{Name}',
        content: (feature: any) => {
          const attributes = feature.graphic.attributes;
          let content = `
            <div class="popup-content">
              <div class="popup-section">
                <h3>基本信息</h3>
                <p><strong>名称：</strong>${attributes.Name || '无'}</p>
                <p><strong>灾难类型：</strong>${attributes.DisasterType || '无'}</p>
                <p><strong>描述：</strong>${attributes.Description || '无'}</p>
              </div>
          `;

          // 检查是否有DisasterMessageJson数据
          if (attributes.DisasterMessageJson) {
            try {
              const messageData = JSON.parse(attributes.DisasterMessageJson);

              // 添加确认状态信息
              content += `
                <div class="popup-section">
                  <h3>状态信息</h3>
                  <p><strong>状态：</strong>${messageData.confirmed ? '已确认' : '未确认'}</p>
              `;

              if (messageData.confirmed) {
                content += `<p><strong>确认时间：</strong>${new Date(messageData.confirmTime).toLocaleString()}</p>`;
                if (messageData.confirmNote) {
                  content += `<p><strong>确认备注：</strong>${messageData.confirmNote}</p>`;
                }
              }

              content += `<p><strong>同步状态：</strong>${messageData.synced ? '已同步' : '未同步'}</p>`;
              if (messageData.synced && messageData.syncTime) {
                content += `<p><strong>同步时间：</strong>${new Date(messageData.syncTime).toLocaleString()}</p>`;
              }
              content += `</div>`;

              // 添加受灾情况数据
              if (messageData.disasterImpact) {
                const impact = messageData.disasterImpact;
                content += `
                  <div class="popup-section">
                    <h3>受灾情况</h3>
                    <p><strong>受灾人数：</strong>${impact.affectedPeople || 0} 人</p>
                    <p><strong>受伤人数：</strong>${impact.injuredPeople || 0} 人</p>
                    <p><strong>死亡人数：</strong>${impact.deathCount || 0} 人</p>
                    <p><strong>无家可归人数：</strong>${impact.homelessPeople || 0} 人</p>
                    <p><strong>经济损失：</strong>${impact.economicLoss || 0} 万元</p>
                    <p><strong>受灾面积：</strong>${impact.affectedArea || 0} km²</p>
                    <p><strong>救援队伍数量：</strong>${impact.rescueTeams || 0} 个</p>
                    <p><strong>救援人员数量：</strong>${impact.rescuePersonnel || 0} 人</p>
                  </div>
                `;
              }
            } catch (e) {
              console.error('解析DisasterMessageJson失败:', e);
            }
          }

          content += `</div>`;
          return content;
        },
        outFields: ['*'],
      },
    })

    // 添加图层到地图
    map.add(disasterLayer)

  } catch (error) {
    console.error('初始化地图失败:', error)
    ElMessage.error('初始化地图失败')
  }
}
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100%;
}

.map-view {
  width: 100%;
  height: 100%;
}
</style>

<style>
/* 弹出窗口样式 */
.popup-content {
  font-family: 'Microsoft YaHei', sans-serif;
  padding: 5px;
}

.popup-section {
  margin-bottom: 15px;
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 10px;
}

.popup-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.popup-section h3 {
  font-size: 16px;
  color: #409eff;
  margin-bottom: 10px;
  font-weight: bold;
}

.popup-section p {
  margin: 5px 0;
  font-size: 14px;
  line-height: 1.5;
}
</style>
